<?php 
require 'header.php';   
if($_SESSION['username']=="")
{
	echo "<script>alert('登录后操作');window.history.back();</script>";
}
?>
<?php
session_start();
include("connect.php");
   mysqli_query($conn,'set names utf8');
   $user=$_SESSION['username'];
  $SQL="select * from userinfo where username='$user'";
   $sq=mysqli_query($conn,$SQL);
$info=mysqli_fetch_array($sq);
$username=$info['username'];	//用户名	
$pwd=$info['pwd'];				//密码
$tel=$info['tel'];				//电话
$Email=$info['Email'];			//邮箱

?>
<?php
 if ($_GET['action'] == 'mod') 
 { 
 $username=$_POST['username'];
$pwd=$_POST['pwd'];
$tel=$_POST['tel'];
$Email=$_POST['Email'];
$reuser=$_SESSION['username'];
  $SQL="update userinfo set username='".$username."',pwd='".$pwd."', tel='".$tel."', Email ='".$Email."' where username='".$reuser."'"; 
  $sq=mysqli_query($conn,$SQL);
	$_SESSION['username']=$username;
   echo "<script>alert('修改成功!');window.location='UserInfo.php';</script>";

 }
 ?>

<div class="container" id="never" style="margin-top: 30px;">
<div class="card mb-3 border border-primary"  >
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="./img/fj.jpg" class="card-img" height="100%">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">个人资料</h5>
     <form method="post" name="login" action="UserInfo.php?action=mod">
       <div class="form-group">
         <label for="formGroupExampleInput">用户名</label>
         <input type="text" name="username" autocomplete="off" value= "<?php echo $username;?>"  readonly class="form-control" id="formGroupExampleInput" >
       </div>
       <div class="form-group">
         <label for="formGroupExampleInput2">密码</label>
         <input v-model="pwd" v-bind:class="{'is-valid' : pwdv,'is-invalid' : !pwdv&&pwd!=''}"  type="password" name="pwd" autocomplete="off" class="form-control" id="formGroupExampleInput2">
			<small v-if="pwdv==false&&pwd!=''" id="pwdHelp" class="form-text text-danger">密码必须包括数字，字母或特殊符号，长度为6-16</small>
			<small v-else-if="pwdv==true&&pwd!=''" id="pwdHelp" class="form-text text-success">密码格式正确</small>
			<small v-else-if="pwd==''" id="pwdHelp" class="form-text text-muted">请设置密码</small>
	   </div>
	   <div class="form-group">
	     <label for="formGroupExampleInput3">电话</label>
	     <input v-bind:class="{'is-valid' : phonev,'is-invalid' : !phonev&&phone!=''}"  v-model="phone"   type="text" name="tel" autocomplete="off"   class="form-control" id="formGroupExampleInput3">
		<small  v-if="phonev==false&&phone!=''"  id="phHelp" class="form-text text-danger">电话长度或格式有误</small>
		 <small  v-else-if="phonev!=false&&phone!=''"  id="phHelp" class="form-text text-success">电话格式正确</small>
		  <small  v-else-if="phone==''"  id="phHelp" class="form-text text-muted">请输入您的电话号</small>
	   </div>
	   <div class="form-group">
	     <label for="formGroupExampleInput4">Email</label>
	     <input v-bind:class="{'is-valid' : emailv,'is-invalid' : !emailv&&email!=''}" v-model="email" type="text" name="Email" autocomplete="off"  class="form-control" id="formGroupExampleInput4">
		<small  v-if="emailv==false&&email!=''"  id="emailHelp" class="form-text text-danger">邮箱格式有误</small>
		 <small  v-else-if="emailv!=false&&email!=''"  id="emailHelp" class="form-text text-success">邮箱格式正确</small>
		<small v-else-if="email==''" id="emailHelp" class="form-text text-muted">请输入您的邮箱</small>
	   </div>
	     <button v-bind:type="{submit : gi}" v-on:click="go()" class="btn btn-success">修改</button>
     </form>

      </div>
    </div>
  </div>
</div>
</div>


</body>
<script type="text/javascript">
		var v = new Vue({
			el: '#never',
			data: {
				phone: '<?php echo $tel;?>',
				phonev: false,
				email: '<?php echo $Email;?>',
				emailv: false,
				pwd: '<?php echo $pwd;?>',
				pwdv: false,
				gi:false
			},
			mounted(){			//钩子函数，替换el执行一次，以免红字
				var re = /^1[3456789]\d{9}$/;
				let str = this.phone;
				if (re.test(str)) {
					this.phonev = true;
				} else {
					this.phonev = false;
				}
				var re2 = /^[\da-z]+([\-\.\_]?[\da-z]+)*@[\da-z]+([\-\.]?[\da-z]+)*(\.[a-z]{2,})+$/;
				let str2 = this.email;
				if (re2.test(str2)) {
					this.emailv = true;
				} else {
					this.emailv = false;

				}
				var re3 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
				let str3 = this.pwd;
				if (re3.test(str3)) {
					this.pwdv = true;
				} else {
					this.pwdv = false;
				}
			},
			updated() {
				var re = /^1[3456789]\d{9}$/;
				let str = this.phone;
				if (re.test(str)) {
					this.phonev = true;
				} else {
					this.phonev = false;
				}
				var re2 = /^[\da-z]+([\-\.\_]?[\da-z]+)*@[\da-z]+([\-\.]?[\da-z]+)*(\.[a-z]{2,})+$/;
				let str2 = this.email;
				if (re2.test(str2)) {
					this.emailv = true;
				} else {
					this.emailv = false;

				}
				var re3 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
				let str3 = this.pwd;
				if (re3.test(str3)) {
					this.pwdv = true;
				} else {
					this.pwdv = false;
				}
			},
			methods: {
				go: function() {
					if (this.phonev == true && this.pwdv == true && this.emailv == true) {
						
					} else {

						alert("有内容未填写完毕或不合法!");
					}
				}
			}
		})
	</script>